<template>
  <view class="mbti-questionnaire-pro">
    <view class="progress-bar">
      <view class="progress-inner" :style="{ width: ((currentIndex + 1) / questions.length * 100) + '%' }"></view>
    </view>
    <view class="question-card">
      <view class="question-title">第{{ currentIndex + 1 }}/{{ questions.length }}题</view>
      <view class="question-text">{{ questions[currentIndex].question }}</view>
      <view class="options">
        <radio-group :name="'question' + currentIndex" @change="e => handleRadioChange(e, currentIndex)">
          <label v-for="(option, optIndex) in questions[currentIndex].options" :key="optIndex" class="radio-label">
            <radio :value="option.value" :checked="answers[currentIndex] === option.value" />
            <text>{{ option.text }}</text>
          </label>
        </radio-group>
      </view>
      <view class="btn-group">
        <button class="nav-btn prev" :disabled="currentIndex === 0" @click="goPrev">上一题</button>
        <button class="nav-btn next" :disabled="!answers[currentIndex]" @click="goNext">
          {{ currentIndex === questions.length - 1 ? '提交' : '下一题' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { questions } from '../data/pro-questions'

export default {
  name: 'MbtiQuestionnairePro',
  emits: ['submit', 'error'],
  data() {
    return {
      questions,
      answers: Array(questions.length).fill(null),
      currentIndex: 0
    }
  },
  methods: {
    handleRadioChange(e, idx) {
      this.answers.splice(idx, 1, e.detail.value)
    },
    goPrev() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    goNext() {
      if (!this.answers[this.currentIndex]) return
      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++
      } else {
        this.submitAnswers()
      }
    },
    submitAnswers() {
      if (this.answers.includes(null)) {
        this.$emit('error', '请完成所有题目后再提交！')
        return
      }
      // 统计各维度分数
      const dimensionScores = { EI: 0, SN: 0, TF: 0, JP: 0 }
      // 题库需保证每题有dimension字段
      this.questions.forEach((q, idx) => {
        if (!q.dimension) return
        if (q.dimension.length === 2) {
          // E/I S/N T/F J/P
          if (this.answers[idx] === q.dimension[0]) dimensionScores[q.dimension]++
          else dimensionScores[q.dimension]--
        }
      })
      const typeMap = [
        { key: 'EI', left: 'E', right: 'I' },
        { key: 'SN', left: 'S', right: 'N' },
        { key: 'TF', left: 'T', right: 'F' },
        { key: 'JP', left: 'J', right: 'P' }
      ]
      let mbtiType = ''
      typeMap.forEach(({ key, left, right }) => {
        mbtiType += dimensionScores[key] >= 0 ? left : right
      })
      this.$emit('submit', { type: mbtiType, answers: this.answers })
    }
  }
}
</script>

<style scoped>
.mbti-questionnaire-pro {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60rpx;
}
.progress-bar {
  width: 80vw;
  height: 12rpx;
  background: #e5e7eb;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
  overflow: hidden;
}
.progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #4f8cff, #38bdf8);
  border-radius: 8rpx;
  transition: width 0.3s;
}
.question-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(79,140,255,0.08);
  padding: 40rpx 30rpx 30rpx 30rpx;
  width: 90vw;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question-title {
  font-size: 32rpx;
  color: #4f8cff;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.question-text {
  font-size: 30rpx;
  color: #222;
  margin-bottom: 30rpx;
  text-align: center;
}
.options {
  margin-bottom: 30rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
  font-size: 28rpx;
}
.radio-label text {
  margin-left: 16rpx;
}
.btn-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}
.nav-btn {
  flex: 1;
  margin: 0 10rpx;
  height: 64rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: linear-gradient(90deg, #4f8cff, #38bdf8);
  color: #fff;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(79,140,255,0.08);
  transition: background 0.2s;
}
.nav-btn:disabled {
  background: #bcd0ee;
  color: #fff;
}
</style>